<template>
  <div>
    <div class="transfer">
      <div class="leftTransfer">
        <div class="leftTransfer_title">
          <span>{{ titles[0] }}</span>
          <span>{{ left.transferDataChecked.length }}/{{ left.childrenNum || 0 }}</span>
        </div>
        <el-input
            @input="transferInputLeft"
            class="transfer_input"
            size="small"
            placeholder="请输入内容"
            v-model="left.inputValue"
        />
        <div style="margin: 5px 0"></div>
        <el-scrollbar class="transfer_group">
          <el-tree
              :data="left.transferData"
              show-checkbox
              node-key="key"
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
              @check="leftHandleChecked"
          />
        </el-scrollbar>
        <el-pagination
            small
            class="pagination"
            :pager-count="5"
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
        />
      </div>
      <div class="transferButton">
        <el-button type="primary" icon="el-icon-arrow-right" :disabled="!left.transferDataChecked.length" @click="push"
        >
        </el-button>
        <el-button type="primary" icon="el-icon-arrow-left" :disabled="!right.transferDataChecked.length" @click="del"
        >
        </el-button>
      </div>
      <div class="rightTransfer">
        <div class="rightTransfer_title">
          <span>{{ titles[0] }}</span>
          <span>{{ right.transferDataChecked.length }}/{{ right.transferData.length }}</span>
        </div>
        <el-input
            @input="transferInputRight"
            class="transfer_input"
            placeholder="请输入内容"
            size="small"
            v-model="right.inputValue"
        />
        <div style="margin: 5px 0"></div>
        <el-scrollbar class="transfer_group">
          <el-tree
              :data="right.transferData"
              show-checkbox
              node-key="key"
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultPropsRight"
              @check="rightHandleChecked"
          />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    titles: {
      type: Array,
      default: () => ['待选列表', '已选列表']
    },
  },
  data() {
    return {
      left: {
        inputValue: '',
        isIndeterminate: false, //半选按钮
        checkAll: false, //是否点击全选
        transferData: [], //穿梭框左侧全部数据
        transferDataAll: [], //穿梭框左侧全部数据记录
        transferDataChecked: [], //穿梭框左侧选中数据
        originData: [] //原始数据
      },
      right: {
        inputValue: '',
        isIndeterminate: false, //半选按钮
        checkAll: false, //是否点击全选
        transferData: [], //穿梭框右侧全部数据
        transferDataAll: [], //穿梭框左侧全部数据记录
        transferDataChecked: [] //穿梭框右侧选中数据
      },
      total: 0,
      queryParams: {
        page: 1,
        per_page: 10
      },
      defaultProps: {
        label: 'label',
        id: 'key',
        pid:'key2',
        children: 'children'
      },
      defaultPropsRight: {
        label: 'label2',
        id: 'key',
        pid:'key2',
        children: 'null'
      }
    }
  },

  created() {
    let _ = this
    _.initTransferData()
  },

  methods: {
    /** 初始化*/
    async initTransferData() {
      let _ = this,
          arr = []
      const {data: res} = await _.$H.post(_.$A.install.getInstallPerson, {})
      arr = (res.data || []).map((i) => {
        return {
          label: i.label,
          key: i.key,
          children: i.apiInstallPersonVOList
        }
      })
      // console.log('init', _.left.transferData)
      let childrenNum = 0
      _.left.transferData = arr.map((item) => {
        if (item.children) {
          item.children.forEach((item2) => {
            item2.label2 = item.label + '-' + item2.label
            item2.key2 = item.key
          })
          childrenNum += item.children.length
        }
        if (item.children.length === 0) {
          item.disabled = true
        }
        return item
      })
      _.left.childrenNum = childrenNum
      _.left.originData = JSON.parse(JSON.stringify(_.left.transferData))
      _.left.transferData.map((item, index) => {
        item.page = _.queryParams.page
      })
      _.total = res.data.total
      _.left.transferDataAll = _.left.transferData
      // 删除左侧的数据
      _.delLeftData()
    },

    /** 删除左侧数据*/
    delLeftData() {
      let _ = this
      // 获得一个右边的数据，只有纯id
      let checkedIdArr = _.right.transferData.map((item) => {
        return item[_.defaultProps.id]
      })
      // 左侧数据删除
      _.left.transferData = _.left.transferData.filter((item) => {
        // 删除时，判断左侧的一级数据的二级是否全部转移，如果是，则一级也删除，否则，只删除二级
        if (item.children && item.children.length > 0) {
          let childrenArr = item.children.map((item2) => {
            return item2[_.defaultProps.id]
          })
          if (childrenArr.every((item3) => checkedIdArr.includes(item3))) {
            return false
          } else {
            item.children = item.children.filter((item2) => {
              if (!checkedIdArr.includes(item2[_.defaultProps.id])) {
                return item2
              }
            })
            return item
          }
        } else {
          if (!checkedIdArr.includes(item[_.defaultProps.id])) {
            return item
          }
        }
      })
    },

    /** 左侧勾选数据*/
    leftHandleChecked(data, nodes) {
      let _ = this
      // console.log(data, nodes, 'data做选中')
      _.left.transferDataChecked = (nodes.checkedNodes || []).filter((item) => item.children == undefined)
    },

    /** 右侧勾选数据*/
    rightHandleChecked(data, nodes) {
      let _ = this
      // console.log(data, nodes, 'data做选中')
      _.right.transferDataChecked = nodes.checkedNodes || []
    },
    /** 穿梭框选中数据*/
    push() {
      let _ = this
      // 数据移到右侧
      // console.log('之前', _.right.transferData)
      _.right.transferData = [..._.right.transferData, ..._.left.transferDataChecked].sort(
          (a, b) => {
            // console.log('之', a['key2'], b)
            return Number.parseInt(a['key2'].slice(13)) - Number.parseInt(b['key2'].slice(13))
          }
      )
      // console.log('之后', _.right.transferData)
      _.right.transferDataAll = _.right.transferData
      // 删除左侧的数据
      _.delLeftData()
      _.left.transferDataAll = _.left.transferData
      // 每次推送完之后，重置选中框
      _.left.transferDataChecked = []
      _.left.isIndeterminate = false
      _.left.checkAll = false
      this.$emit('selected',_.right.transferData);
    },
    /** 穿梭框删除数据 回显的时候根据current回显到当前*/
    del() {
      let _ = this
      //过滤当前页选中的数据
      let arr = _.right.transferDataChecked || []
      _.left.originData.forEach((item) => {
        let node = arr.filter((item2) => item2.key2 === item.key)

        if (node.length) {
          let ev = _.left.transferData.find((item2) => {
            return node[0].key2 === item2.key
          })
          // console.log(ev, 'ev11')
          if (ev) {
            ev.children = [...ev.children, ...node]
          } else {
            let ev2 = _.left.originData.find((item2) => {
              return node[0].key2 === item2.key
            })
            if (ev2)
              _.left.transferData.push({
                ...ev2,
                children: [...node]
              })
          }
        }
      })
      _.left.transferDataAll = _.left.transferData
      // 获得一个右边的数据，只有纯id
      let checkedIdArr = _.right.transferDataChecked.map((item) => {
        return item[_.defaultProps.id]
      })
      // 删除选中的数据
      _.right.transferData = _.right.transferData.filter((item) => {
        if (!checkedIdArr.includes(item[_.defaultProps.id])) {
          return item
        }
      })
      _.right.transferDataAll = _.right.transferData
      // 每次推送完之后，重置选中框
      _.right.transferDataChecked = []
      _.right.isIndeterminate = false
      _.right.checkAll = false
    },
    /** */
    handleCurrentChange(val) {
      let _ = this
      _.queryParams.page = val
      _.initTransferData()
    },
    /** 左侧检索*/
    transferInputLeft() {
      let _ = this
      if (_.left.inputValue) {
        _.left.transferData = _.left.transferData.filter(
            (p) => p[_.defaultProps.label].indexOf(_.left.inputValue) !== -1
        )
      } else {
        _.left.transferData = _.left.transferDataAll
      }
    },
    /** 右侧检索*/
    transferInputRight() {
      let _ = this
      if (_.right.inputValue) {
        _.right.transferData = _.right.transferData.filter(
            (p) => p[_.defaultProps.label].indexOf(_.right.inputValue) !== -1
        )
      } else {
        _.right.transferData = _.right.transferDataAll
      }
    }
  }
}
</script>

<style lang="less" scoped>
.transfer {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .transferButton {
    .el-button {
      display: block;
      margin: 10px 0;
    }
  }

  .el-checkbox {
    line-height: 30px;
  }

  .transfer_input {
    margin: 10px 15px 0 15px;
    width: 85%;

    .el-input--medium .el-input__inner {
      height: 36px;
      line-height: 36px;
      border-radius: 16px;
    }
  }

  .leftTransfer,
  .rightTransfer {
    height: 350px;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    display: inline-block;
    vertical-align: middle;
    width: 250px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 0 10px;

    .el-checkbox {
      display: block;
    }

    .pagination {
      position: absolute;
      bottom: -4px;
      right: 0;
    }

    .leftTransfer_title,
    .rightTransfer_title {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      background: #f5f7fa;
      margin: 0;
      padding-left: 15px;
      border-bottom: 1px solid #e6ebf5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #000000;
      padding-right: 15px;
      align-items: center;
    }
  }
}

.transfer_group {
  padding-left: 15px;
  height: calc(100% - 105px);
}
</style>

